<template>
  <div class="menu-tab">
      <router-link v-for="(item, idx) in routerList"  :key="idx" :to="item.path">
          {{item.mate.title}}
      </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState(['routerList'])
    },
}
</script>

<style lang="scss" scoped>
.menu-tab {
  width: 180px;
  border-right: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  a {
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ccc;
      background: rgb(246,246,246);
      color: #000;
  }
  .router-link-active {
      background: #fff;
  }
}
</style>